<template>
  <page-header-wrapper :title="false">
    <a-card title="优秀录音">
      <a-tabs @change="onTabs">
        <a-tab-pane key="2" tab="APP拨号"></a-tab-pane>
        <a-tab-pane key="1" tab="软件拨号"></a-tab-pane>
      </a-tabs>
      <s-table
        ref="table"
        :row-key="(record) => record.id"
        :columns="goodColumns"
        :data="goodData"
      >
        <template slot="url" slot-scope="text,record">
          <audio v-if="record.duration != 0" :src="text" controls :style="{ height: '20px', lineHeight: '20px' }">
            您的浏览器不支持 audio 标签
          </audio>
          <div v-else>-</div>
        </template>
      </s-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import { STable } from '@/components'
import col from '@/columns/calls'
import { getGoodList } from '@/api/voice'
const goodColumns = col.good
export default {
  components: {
    STable
  },
  name: 'GoodCall',
  data () {
    return {
      goodColumns,
      goodData: parameters => {
        return getGoodList(Object.assign(parameters, this.queryParam)).then(res => {
          return res.result
        })
      },
      queryParam: {}
    }
  },
  created () {
    this.queryParam['filter[type]'] = '2'
  },
  methods: {
    onTabs (key) {
      this.queryParam['filter[type]'] = key
      this.$refs.table.refresh(true)
    }
  }
}
</script>

<style scoped>

</style>
